<template>
  <div class="my-table">
    <div class="header">
      <div class="left">
        <el-button icon="Upload" type="success" v-if="showExportBtn">导出</el-button>
        <slot slot name="left-more"></slot>
      </div>
      <div class="right">
        <el-button icon="Edit" type="primary" v-if="showCreateBtn" @click="add">新建 </el-button>
        <slot slot name="right-more"></slot>
      </div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        :border="isBorder"
        :stripe="isStripe"
        @selection-change="handleSelect"
        :style="{ width: tableWidth }"
        v-loading="loading"
        element-loading-text="Loading..."
        :row-key="rowKey"
      >
        <el-table-column type="selection" width="55" align="center" v-if="showSection" />
        <el-table-column type="index" width="80" label="序号" align="center" v-if="showIndex" />
        <template v-for="item in tableItem">
          <template v-if="item.prop == 'custom'">
            <el-table-column #default="scoped" v-bind="item">
              <slot :name="item.slotName" v-bind="scoped"></slot>
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column v-bind="item" show-overflow-tooltip />
          </template>
        </template>
        <el-table-column label="操作" v-if="showOperate" v-bind="operateColumnConfig" align="center">
          <template #default="{ row, $index }">
            <div class="opts">
              <template v-for="item in btnItem">
                <el-button
                  :type="item.btnType"
                  :icon="item.icon"
                  link
                  @click="optClick(row, item.type)"
                  v-if="getPermission(item.permission) && item.isShow"
                >
                  {{ item.text }}
                </el-button>
              </template>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination" v-if="showPagination">
      <el-pagination
        :page-sizes="[10, 20, 30, 40]"
        :current-page="page.page"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getLocalData } from '@/utils/local'
import type { ITableBtnType, TableItemConfig } from './type'

const emit = defineEmits(['handleEdit', 'handleView', 'handleDel', 'update:page', 'handleAdd'])
//获取权限列表
const permissions: string[] = getLocalData('permissionList')
//查看是否有权限
function getPermission(key: string | undefined) {
  if (!key) {
    return true
  }
  return permissions.some((item) => item === key)
}

const props = withDefaults(
  defineProps<{
    tableData: any[]
    loading?: boolean
    page?: any
    getData?: any
    isBorder?: boolean
    isStripe?: boolean
    tableItem: TableItemConfig[]
    btnItem?: ITableBtnType[]
    tableWidth?: string
    permission: any
    rowKey?: string
    //按钮和列的显示
    showOperate?: boolean //显示操作行
    showSection?: boolean //是否可以选择
    showIndex?: boolean //索引行
    showPagination?: boolean //是否显示分页
    showExportBtn?: boolean //是否显示导出按钮
    showCreateBtn?: boolean //是否显示添加按钮
    operateColumnConfig?: any
  }>(),
  {
    isBorder: true,
    isStripe: true,
    permission: {},
    tableWidth: '100%',
    btnItem: () => [
      { btnType: 'primary', type: 'view', text: '查看', isShow: true, icon: 'View' },
      { btnType: 'primary', type: 'edit', text: '编辑', isShow: true, icon: 'Edit' },
      { btnType: 'danger', type: 'delete', text: '删除', isShow: true, icon: 'Delete' }
    ],
    showCreateBtn: true,
    showOperate: true,
    showSection: false,
    showIndex: false,
    showPagination: true,
    showExportBtn: true,
    operateColumnConfig: () => ({
      width: '200',
      align: 'center',
      fixed: 'right'
    })
  }
)

//点击了三个按钮传递事件
const optClick = (item: any, type: string) => {
  switch (type) {
    case 'edit':
      emit('handleEdit', item)
      break
    case 'view':
      emit('handleView', item)
      break
    case 'delete':
      emit('handleDel', item)
      break
    default:
      break
  }
}

const add = () => {
  emit('handleAdd')
}

const handleSelect = (data: any) => {
  console.log(data)
}
const handleSizeChange = (size: number) => {
  props.page.size = size
  props.getData()
}

const handleCurrentChange = (currentPage: number) => {
  props.page.page = currentPage
  props.getData()
}
</script>

<style>
.my-table {
  background-color: var(--theme-background) !important;
}

.opts {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header {
  display: flex;
  height: 60px;
  justify-content: space-between;
  align-items: center;
}

.pagination {
  height: 70px;
  display: flex;
  justify-content: right;
}
</style>
